<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录/注册</title>
    <script src="../interface/library/conn.php"></script>
    <link rel="stylesheet" href="./css/come.css">
    <link rel="stylesheet" href="./css/dome02.css">
    <link rel="stylesheet" href="../dist/boostrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="http://at.alicdn.com/t/font_3191982_jwz6b4juoyh.css">
    <!-- <script src="../dist/boostrap/js/bootstrap.js"></script> -->
    <script src="../dist/boostrap/js/jquery.js"></script>
    <script>
      window.onload=function(){
          let input_one =document.querySelector('.input-one');
          let input_two =document.querySelector('.input-two');
          let input_three =document.querySelector('.input-three');
          let input_four =document.querySelector('.input-four');


          let lable_one =document.querySelector('.lable-one');
          let lable_two =document.querySelector('.lable-two');
          let lable_four =document.querySelector('.lable-four');
          let lable_three =document.querySelector('.lable-three');

          input_one.onfocus =function(){
              lable_one.style.top = '55px';
          }
          input_one.onblur =function(){
      
              if(input_one.value==''){
                lable_one.style.top = '65px';
              input_one.style.backgroundColor='#FCF2F3';

              }else{
              lable_one.style.top = '55px';
              }
          }
          input_two.onfocus =function(){
              lable_two.style.top = '145px';
          }
          input_two.onblur =function(){
              if(input_two.value==''){
                lable_two.style.top = '155px';
              input_two.style.backgroundColor='#FCF2F3';
              }else{
              lable_two.style.top = '145px';
              }
          }
         
          input_four.onfocus =function(){
              lable_four.style.top = '145px';
          }
          input_four.onblur =function(){
              if(input_three.value==''){
                lable_four.style.top = '155px';
              input_four.style.backgroundColor='#FCF2F3';
              }else{
              lable_four.style.top = '145px';
              }
          }

          input_three.onfocus =function(){
            //   lable_three.style.top = '145px';
          }
          input_three.onblur =function(){
            if(input_four.value==''){
            //   lable_three.style.top = '155px';
                input_three.style.backgroundColor='#FCF2F3';
            }
          }

      }
    </script>
</head>
<body>
    <div class="sign-in">
     <div class="row">
        <div class="left">
            <img src="./images/zhuce01.jpg" alt="">
        </div>
        <div class="right">
            <div class="right-top clear">
                <div class="right-top-left">
                    <img src="./images/logo-mi2.png" alt=""><span>小米官网</span>
                </div>
                <div class="right-top-right">
                   
                    <a href="" class="right-a">中文(简体)
                        <span class="iconfont icon-small-bottom-arrow"></span>
                        <!-- <div class="show-hide">
                            <ul>
                                <li><a href="">中文(繁体)</a></li>
                                <li><a href="">English</a></li>
                            </ul>
                        </div> -->
                    </a>
                    <span>|</span>
                    <a href="">帮助中心</a>
                    <a href="">隐私政策</a>
                    <a href="">用户协议</a>
                </div>

            </div>
            <div class="right-bottom">
                <div class="right-bot-a tabs">
                    <ul>
                        <li class="active border">登录</li>
                        <li>注册</li>
                    </ul>
                    <div class="display" >
                        <form action="">
                            <input type="text" class="text-a input-one" id="input-one">
                            <label class="lable-one" for="input-one" style="color: rgb(143, 143, 143);font-weight: 500;">邮箱/手机号/小米ID</label>

                            <br>
                            <p>请输入账号</p>
                            <input type="password"  class="text-a input-two" id="input-two">
                            <label class="lable-two" for="input-two"  style="color: rgb(143, 143, 143);font-weight: 500;">密码</label>

                            <p>请输入登录密码</p>
                            <input type="checkbox" class="check-a">已阅读并同意小米帐号 <b>用户协议</b> 和 <b>隐私政策</b>
                        </form>
                        <div class="hide-a"><a href="./dome01.html">登录</a></div>
                        <p>忘记密码？</p>   <p class="p-one">手机号登录</p>
                        <div class="hide-b">
                            其他方式登录
                        </div>
                        <div class="hide-c">
                            <a href=""><span class="iconfont icon-zhifubao1">
                            </span></a>
                           <a href=""> <span class="iconfont icon-weixin1">
                           </span></a>
                            <a href=""><span class="iconfont icon-QQ">
                            </span></a>
                            <a href=""><span class="iconfont icon-weibo1"></span>
                            </a>
                        </div>

                    </div>

                    <div class="hide-one">
                        <form action="">
                            <input type="text" class="text-a input-three" id="input-three">
                            <lable class="lable-three" for="input-three"  style="color: rgb(143, 143, 143);font-weight: 500;">国家/地区中国</lable>
                            <br>
                            <input type="password"  class="text-a text-b input-four" id="input-four">
                            <label class="lable-four" for="input-four"  style="color: rgb(143, 143, 143);font-weight: 500;">手机号</label>
                            <p>请输入手机号</p>
                            <input type="checkbox" class="check-a">已阅读并同意小米帐号 <b>用户协议</b> 和 <b>隐私政策</b>
                        </form>
                        <div class="hide-a"><a href="./dome01.html">注册</a></div>
                        <p>收不到验证码？</p>  
                        <div class="hide-b">
                            其他方式登录
                        </div>
                        <div class="hide-c">
                            <a href=""><span class="iconfont icon-zhifubao1">
                            </span></a>
                           <a href=""> <span class="iconfont icon-weixin1">
                           </span></a>
                            <a href=""><span class="iconfont icon-QQ">
                            </span></a>
                            <a href=""><span class="iconfont icon-weibo1"></span>
                            </a>
                        </div>
                        
                    </div>


                
                </div>
             
                <p>小米公司版权所有-京ICP备10046444-京公网安备11010802020134号-京ICP证110507号</p>
             
            </div>
            
        </div>
     </div>

    </div>

    




    <script>
        $(function () {
          $('.tabs>ul>li').on('click', function () {
            $(this).addClass('active').siblings().removeClass('active');
            $(this).addClass('border').siblings().removeClass('border');
           

            // index(elm)  在jQuery对象中查找元素索引
            // let index = $('.tabs>ul>li').index(this);
            $('.tabs>div').eq($('.tabs>ul>li').index(this)).addClass('display').siblings().removeClass('display');
          });
        });
</script>

    <script src="https://fastly.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>

</body>
</html>